<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <LINK href="../css/bootstrap.min.css" rel="stylesheet">
  <script src="../js/jquery.js"></script>
  <script src="../js/bootstrap.min.js" ></script>
</head>
<style>
    .container{
        padding-top: 3em;
    }
    .seachinput{
        text-align: right;
    }
    .houstable{
        padding-top: 3em;
    }
    #search{
        width: 150px;
        height: 30px;
    }
</style>
</head>
<body>
<div class="container" >
    <div class="row">
        <div class="col-md-5">
            <button  type="button" class="btn btn-info"  data-toggle="modal" data-target="#myModal"id="tianjia">添加</button>
        </div>
        <div class="col-md-3 col-lg-offset-7 input-group">
            <input type="text" class="form-control" id="inpu">
            <span class="input-group-btn">
          <button class="btn btn-info" type="button"id="chaxun">查询</button>
             </span>
        </div>
    </div>
    <div class="row houstable">
        <table class="table table-bordered"id="lyxx">
            <tr>
                <td><input type="checkbox" id="checkbox2"></td>
                <td>楼宇编号</td>
                <td>小区名称</td>
                <td>楼宇名称</td>
                <td>单元数量</td>
                <td>楼宇层数</td>
                <td>楼宇类型</td>
                <td>楼宇结构</td>
                <td>楼宇朝向</td>
                <td>楼宇备注</td>
                <td>操作</td>
            </tr>
        </table>
    </div>
</div>
<!-- 添加模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabell">楼栋添加</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon">小区名称</span>
                            <select style="width: 100%;height: 100%" id="xl"></select>
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">楼宇名称</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="lymc">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">单元数量</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="dysl">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">楼宇层数</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="lycs">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon">楼宇类型</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="lylx">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">楼宇结构</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="lyjg">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">楼宇朝向</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="lycx">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">楼宇备注</span>
                            <input type="text" class="form-control" placeholder="请输入.." id="lybz">
                        </div>
                    </div>
                    </div>

                </div>
<!--                <div class="form-group has-feedback">-->
<!--                    <label>小区名称</label>-->
<!--                    <select style="width: 100%;height: 100%" id="xl"></select>-->
<!--&lt;!&ndash;                    <input id="xqmc" class="form-control"  placeholder="请输入小区名称"/>&ndash;&gt;-->
<!--                    <label>楼宇名称</label>-->
<!--                    <input id="lymc" class="form-control"  placeholder="请输入楼宇名称"/>-->
<!--                    <label>单元数量</label>-->
<!--                    <input id="dysl" class="form-control"  placeholder="请输入单元数量"/>-->
<!--                    <label>楼宇层数</label>-->
<!--                    <input id="lycs" class="form-control"  placeholder="请输入楼宇层数"/>-->
<!--                    <label>楼宇类型</label>-->
<!--                    <input id="lylx" class="form-control"  placeholder="请输入楼宇类型"/>-->
<!--                    <label>楼宇结构</label>-->
<!--                    <input id="lyjg" class="form-control"  placeholder="请输入楼宇结构"/>-->
<!--                    <label>楼宇朝向</label>-->
<!--                    <input id="lycx" class="form-control"  placeholder="请输入楼宇朝向"/>-->
<!--                    <label>楼宇备注</label>-->
<!--                    <input id="lybz" class="form-control"  placeholder="请输入楼宇备注"/>-->
<!--                </div>-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary"id="tjgg">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--单元模态框-->

<div class="modal fade" id="myM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">单元管理</h4>
            </div>
            <div class="modal-body">
                <div class="form-group has-feedback">
                    <label>小区名称</label>
                    <input id="xiaoqu" class="form-control"  placeholder=""/>
                    <label>单元名称</label>
                    <input id="danyuan" class="form-control"  placeholder=""/>
                    <label>楼宇名称</label>
                    <input id="louyu" class="form-control"  placeholder=""/>
<!--                    <table id="danyuan">-->
<!--                       <tr>-->
<!--                           <td>小区 名称</td>-->
<!--                           <td>单元名称</td>-->
<!--                           <td>楼宇名称</td>-->
<!--                       </tr>-->
<!--                    </table>-->

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!--                <button type="button" class="btn btn-primary"id="tijiao">提交更改</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<input id="ccc" hidden>
    <script type="text/javascript">
        /**
         * 查询
         * @param xxx
         */
        $("#chaxun").on("click",function (){
            let inpuu=$("#inpu").val();
            if(inpuu==""){
                window.location.reload()
                return;
            }
            let inpu=$("#inpu").val();
            $.ajax({
                url:"getChaxun",
                type:"get",
                data:{inpu:inpu},
                success:function (data){
                    console.log(data);
                    if(data.length==0){
                        alert("楼宇名称不存在")
                        return
                    }
                    $("#lyxx tr:not(:first)").remove()
                    for(let i=0;i<data.length;i++){
                        let xxx=data[i];
                        add(xxx)
                    }
                }
            });
        })
            function add(xxx){
                let newTr = document.createElement("tr");
                let t1=document.createElement("td");
                $(t1).html("<input type=\"checkbox\" id=\"checkbox2\">")
                let t2=document.createElement("td");
                //楼宇编号
                $(t2).html(xxx.tid);
                //小区名称
                let t3=document.createElement("td");
                $(t3).html(xxx.vname);
                //楼宇名称
                let t4=document.createElement("td");
                $(t4).html(xxx.ttname);
                //单元数量
                let t5=document.createElement("td");
                $(t5).html(xxx.tnumber);
                //楼宇层数
                let t6=document.createElement("td");
                $(t6).html(xxx.tstorey);
                //楼宇类型
                let t7=document.createElement("td");
                $(t7).html(xxx.tgenre);
                //楼宇结构
                let t8=document.createElement("td");
                $(t8).html(xxx.tstructure);
                //楼宇朝向
                let t9=document.createElement("td");
                $(t9).html(xxx.tdirection);
                //楼宇备注
                let t10=document.createElement("td");
                $(t10).html(xxx.tremarks);
                //操作
                let t11=document.createElement("td");
                let aa=document.createElement("button")
                $(aa).attr("class", "glyphicon glyphicon-pencil btn btn-primary")
                $(aa).attr("data-toggle","modal")
                $(aa).attr("data-target",)
                $(aa).on("click",function () {
                    $("#myModalLabell").html("修改楼宇信息")
                    let ccc=$("#ccc").val(xxx.tid)
                    $("#myModal").modal("show")
                    $("#lymc").val(xxx.ttname)
                    $("#dysl").val(xxx.tnumber)
                    $("#lycs").val(xxx.tstorey)
                    $("#lylx").val(xxx.tgenre)
                    $("#lyjg").val(xxx.tstructure)
                    $("#lycx").val(xxx.tdirection)
                    $("#lybz").val(xxx.tremarks)
                });

                /**
                 * 删除
                 * @type {HTMLButtonElement}
                 */
                let bb=document.createElement("button")
                $(bb).on("click",function () {
                    let r=confirm("确认删除吗?")
                    if(r==true){
                        $.ajax({
                            url: "getDjsc",
                            type: "get",
                            data: {tid: xxx.tid},
                            dataType: "json",
                            success: function (data) {
                                console.log(data);
                            }
                    });
                        window.location.reload();
                        }
                    });
                    $(bb).attr("class", "glyphicon glyphicon-trash  btn btn-danger")

                     let cc=document.createElement("button")
                    $(cc).attr("class", "btn btn-warning")
                    cc.innerText="单元"
                    $(cc).attr("data-toggle","modal")
                     $(cc).attr("data-target","#myM")
                /**
                 * 单元
                 */
                $(cc).on("click",function (){

                    $.ajax({
                        url:"getDanyuan",
                        type:"get",
                        data:{tid:xxx.tid},
                        dataType:"json",
                        success:function (data){
                            data = data[0]
                            $("#xiaoqu").val(data.vname)
                            $("#danyuan").val(data.uname)
                            $("#louyu").val(data.ttname)
                             }
                         });
                     });
                     $(t11).append(aa, bb,cc)
                    $(newTr).append(t1, t2, t3, t4, t5, t6, t7, t8, t9, t10, t11);
                    $("#lyxx").append(newTr);
               }

        /**
         * 模态框添加修改
         */
        $("#tjgg").on("click",function (){
            let i=$(ccc).val();
            let url ;
            if(i==0){
                url="getLygl"
            }else {
                url="getXuiga"
            }
            $.ajax({
                url: url,
                type: "post",
                data: chuanrujs(),
                dataType: "json",
                success: function (data) {
                    console.log(data.tid);
                    if (data == 1) {
                        alert("成功")
                        window.location.reload();
                    } else {
                        alert("失败")
                    };
                }
            });
        });
            /**
             * 获取json对象
             */
            function chuanrujs(){
                let xqmc=$("#xl option:selected").val();
                let lymc=$("#lymc").val();
                let dysl=$("#dysl").val();
                let lycs=$("#lycs").val();
                let lylx=$("#lylx").val();
                let lyjg=$("#lyjg").val();
                let lycx=$("#lycx").val();
                let lybz=$("#lybz").val();
                let tid=$(ccc).val();
                let objj={
                 "vid":xqmc,
                 "ttname":lymc,
                 "tnumber":dysl,
                 "tstorey":lycs,
                 "tgenre":lylx,
                 "tstructure":lyjg,
                 "tdirection":lycx,
                 "tremarks":lybz,
                    "tid":tid,
                }
                return objj;
            };
        /**
         * 修改模态框标题
         */
     $("#tianjia").on("click",function (){
         // alert(1)
         // $("#lymc").val("")
         // $("#dysl").val("")
         // $("#lycs").val("")
         // $("#lylx").val("")
         // $("#lyjg").val("")
         // $("#lycx").val("")
         // $("#lybz").val("")
         $("#myModalLabell").html("添加楼宇信息")
         $("#ccc").val(0)
     })
        /**
         * 加载字段
         */
        $.ajax({
            url:"getXszd",
            type:"get",
            dataType:"json",
            success: function (data) {
                console.log(data);
                for(let i=0;i<data.length;i++){
                    let xxx=data[i];
                    add(xxx)
                }
            }
        });

        /***
         * 下拉框赋值
         * @param Object
         */
        function getXqs(Object) {
            $.ajax({
                url: "getxiala",
                type: "get",
                dataType: "json",
                success: function (data) {
                    console.log(data)
                    for (let i = 0; i < data.length; i++) {
                        let info = data[i];
                        let newOption = document.createElement("option");
                      $(newOption).attr("value", info.vid);
                        $(newOption).html(info.vname);
                        $(Object).append(newOption);
                    }
                }
            })
        }
       //  window.onload=getXqs($("#xiala"));
        window.onload=getXqs($("#xl"));
    </script>
</body>
</html>